<template>
  <div class="container">
    <div class="header">
      <span>2019年</span>
      <span id="share">
        <!-- 分享 -->
        <img :src="pageImgArr.shareIcon" alt="">
      </span>
    </div>
    <div class="monthes">
      <span :class="{'on':index==2}" v-for="(item,index) in monthArray" :key="index">{{item.name}}</span>
    </div>
    <div class="wrapper">
      <div class="wrapper-list" v-for="(item,index) in pageGoodsArr" :key="index">
        <div class="date-time"><span class="day">11</span>/07</div>
        <GoodsItem 
          :parentData="subItem"
          @childEvent="goForGoodsDetail"
          v-for="(subItem,index) in item.list"
          :key="index"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import dataList from './dataList.json'
  import GoodsItem from './item.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  export default {
    components:{ GoodsItem },
    data(){
      return{
        pageImgArr:{},
        monthArray:[
          {id:0, name:'5月',year:'2019'},
          {id:1, name:'6月',year:'2019'},
          {id:2, name:'7月',year:'2019'},
          {id:3, name:'8月',year:'2019'},
          {id:4, name:'9月',year:'2019'},
        ],
        pageGoodsArr:[],
      }
    },
    created(){
      this.initPageImg();
    },
    mounted(){
      let that=this;
      this.pageGoodsArr=dataList;
    },
    methods:{
      initPageImg(){
        this.pageImgArr={
          shareIcon:require('../../../assets/img/publicImg/icon_share@2x.png')
        }
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      }
    }
  }
</script>

<style lang="less" scoped>
.container{font-family: '微软雅黑'}
.header{
  height: 0.8rem;
  line-height: 0.8rem;
  color: #333;
  font-weight: 650;
  text-align: center;
  font-size: 0.36rem;
  position: relative;
  border-bottom: 0.02rem solid #d5d5d5;
  #share{
    width: 1rem;
    height: 0.45rem;
    line-height: 0.45rem;
    text-align: center;
    position: absolute;
    top: 0.18rem;right: 0.3rem;
    // background: #f77c09;
    border-radius: 0.45rem 0 0 0.45rem;
    img{
      display: inline-block;
      width: 0.45rem;
      height: 0.45rem;
      vertical-align: top;
    }
  }
}
.monthes{
  display: flex;
  align-items: center;
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.3rem;
  span{
    display: inline-block;
    width: 1.5rem;
    text-align: center;
    &.on{
      font-size: 0.36rem;
      color: #FF4817;
    }
  }
}
.wrapper-list{
  padding: 0 0.25rem;
  .date-time{
    font-weight: 600;
    line-height: 0.8rem;
    font-size: 0.32rem;
    letter-spacing: 0.04rem;
    .day{
      font-size: 0.5rem;
    }
  }
}
</style>